import { useState } from 'react';
import { useTheme } from '@/hooks/useTheme';
import { ArrowLeft, Calendar, Utensils, Clock, ChevronDown, ChevronUp, Download } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { toast } from 'sonner';

// 定义每日饮食类型
interface DailyMeal {
  breakfast: string[];
  lunch: string[];
  snack: string[];
  dinner: string[];
}

// 定义每周饮食计划类型
interface WeeklyDietPlan {
  [key: string]: DailyMeal;
}

// 饮食计划数据
const weeklyDietPlan: WeeklyDietPlan = {
  周一: {
    breakfast: [
      "鸡蛋: 2个",
      "菠菜: 100克",
      "坚果: 15克"
    ],
    lunch: [
      "鸡胸肉: 200克",
      "米饭: 350克",
      "西兰花: 150克",
      "橄榄油: 5克"
    ],
    snack: [
      "蛋白粉: 1勺",
      "坚果: 20克"
    ],
    dinner: [
      "鸡胸肉: 200克",
      "米饭: 300克",
      "西兰花: 150克",
      "橄榄油: 5克"
    ]
  },
  周二: {
    breakfast: [
      "鸡蛋: 1个",
      "菠菜: 1杯",
    ],
    lunch: [
      "牛里脊肉: 200克",
      "米饭: 350克",
      "西兰花: 150克",
      "橄榄油: 5克"
    ],
    snack: [
      "蛋白粉: 1勺",
      "坚果: 20克"
    ],
    dinner: [
      "鸡腿肉(去皮): 200克",
      "米饭: 250克",
      "西葫芦: 150克",
      "芦笋: 100克"
    ]
  },
  周三: {
    breakfast: [
      "鸡蛋: 2个",
      "菠菜: 100克",
      "坚果: 15克"
    ],
    lunch: [
      "罗非鱼: 250克",
      "米饭: 350克",
      "西兰花: 150克",
      "橄榄油: 5克"
    ],
    snack: [
      "蛋白粉: 1勺",
      "坚果: 20克"
    ],
    dinner: [
      "鸡胸肉: 150克",
      "米饭: 250克",
      "西葫芦: 150克",
      "芦笋: 100克"
    ]
  },
  周四: {
    breakfast: [
      "鸡蛋: 1个",
      "菠菜: 100克",
      "坚果: 15克"
    ],
    lunch: [
      "鸡腿肉(去皮): 200克",
      "米饭: 350克",
      "西兰花: 150克",
      "橄榄油: 5克"
    ],
    snack: [
      "蛋白粉: 1勺",
      "坚果: 20克"
    ],
    dinner: [
      "牛里脊肉: 200克",
      "米饭: 250克",
      "西葫芦: 150克",
      "芦笋: 100克"
    ]
  },
  周五: {
    breakfast: [
      "鸡蛋: 2个",
      "菠菜: 100克",
      "坚果: 15克"
    ],
    lunch: [
      "鸡胸肉: 200克",
      "米饭: 350克",
      "西兰花: 150克",
      "橄榄油: 5克"
    ],
    snack: [
      "蛋白粉: 1勺",
      "坚果: 20克"
    ],
    dinner: [
      "罗非鱼: 200克",
      "米饭: 250克",
      "西葫芦: 150克",
      "芦笋: 100克"
    ]
  },
  周六: {
    breakfast: [
      "蛋白粉: 1勺",
      "鸡蛋: 1个",
      "菠菜: 100克"
    ],
    lunch: [
      "牛里脊肉: 200克",
      "米饭: 350克",
      "西兰花: 150克",
      "橄榄油: 5克"
    ],
    snack: [
      "蛋白粉: 1勺",
      "坚果: 20克"
    ],
    dinner: [
      "鸡腿肉(去皮): 200克",
      "米饭: 250克",
      "西葫芦: 150克",
      "芦笋: 100克"
    ]
  },
  周日: {
    breakfast: [
      "鸡蛋: 2个",
      "菠菜: 100克",
      "坚果: 15克"
    ],
    lunch: [
      "罗非鱼: 250克",
      "米饭: 350克",
      "西兰花: 150克",
      "橄榄油: 5克"
    ],
    snack: [
      "蛋白粉: 1勺",
      "坚果: 20克"
    ],
    dinner: [
      "鸡胸肉: 250克",
      "米饭: 150克",
      "西葫芦: 150克",
      "芦笋: 100克"
    ]
  }
};

export default function DietPlan() {
  const { theme } = useTheme();
  const [expandedDays, setExpandedDays] = useState<Record<string, boolean>>({
    "周一": true,
    "周二": false,
    "周三": false,
    "周四": false,
    "周五": false,
    "周六": false,
    "周日": false
  });
  const navigate = useNavigate();
  
  // 切换某天的展开/折叠状态
  const toggleDayExpansion = (day: string) => {
    setExpandedDays(prev => ({
      ...prev,
      [day]: !prev[day]
    }));
  };
  
  // 下载饮食计划
  const downloadPlan = () => {
    toast.success("饮食计划已下载！");
  };
  
  // 获取星期几的列表
  const daysOfWeek = Object.keys(weeklyDietPlan);
  
  return (
    <div className={`min-h-screen flex flex-col ${theme === 'dark' ? 'dark bg-slate-900 text-white' : 'bg-white text-slate-900'}`}>
      {/* 导航栏 */}
      <header className="sticky top-0 z-40 bg-white/90 dark:bg-slate-900/90 backdrop-blur-md shadow-md">
        <div className="container mx-auto px-4 py-4 flex items-center">
          <button 
            onClick={() => navigate(-1)} 
            className="mr-4 p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
          >
            <ArrowLeft size={20} />
          </button>
          <h1 className="text-xl font-bold bg-gradient-to-r from-green-600 to-blue-500 bg-clip-text text-transparent">
            每周饮食计划
          </h1>
          <button 
            onClick={downloadPlan}
            className="ml-auto flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-full hover:bg-green-700 transition-colors"
          >
            <Download size={18} />
            <span>下载计划</span>
          </button>
        </div>
      </header>
      
      <main className="flex-grow">
        {/* 介绍区域 */}
        <section className="py-8 bg-gradient-to-br from-green-50 via-white to-blue-50 dark:from-green-900/30 dark:via-slate-900 dark:to-blue-900/30">
          <div className="container mx-auto px-4">
            <div className="max-w-3xl mx-auto text-center">
              <h2 className="text-2xl md:text-3xl font-bold mb-4">科学饮食计划</h2>
              <p className="text-slate-600 dark:text-slate-300 mb-6">
                此饮食计划专为85公斤体重设计，每日蛋白质约136克，碳水约200克，脂肪约50克。
                随着减脂进行，将逐渐增加蛋白质摄入，减少碳水化合物。
              </p>
              
              <div className="flex flex-wrap justify-center gap-4 mb-6">
                <div className="flex items-center bg-white dark:bg-slate-800 px-4 py-2 rounded-full shadow-md">
                  <Utensils size={18} className="mr-2 text-green-600 dark:text-green-400" />
                  <span>每日蛋白质: 约136克</span>
                </div>
                <div className="flex items-center bg-white dark:bg-slate-800 px-4 py-2 rounded-full shadow-md">
                  <Utensils size={18} className="mr-2 text-yellow-600 dark:text-yellow-400" />
                  <span>每日碳水: 约200克</span>
                </div>
                <div className="flex items-center bg-white dark:bg-slate-800 px-4 py-2 rounded-full shadow-md">
                  <Utensils size={18} className="mr-2 text-red-600 dark:text-red-400" />
                  <span>每日脂肪: 约50克</span>
                </div>
              </div>
            </div>
          </div>
        </section>
        
        {/* 饮食计划表格 */}
        <section className="py-10">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              {/* 桌面端表格视图 */}
              <div className="hidden lg:block bg-white dark:bg-slate-800 rounded-2xl shadow-xl overflow-hidden">
                <div className="grid grid-cols-7 border-b border-slate-200 dark:border-slate-700">
                  {daysOfWeek.map(day => (
                    <div key={day} className="py-4 px-3 text-center font-semibold bg-slate-50 dark:bg-slate-700/50">
                      {day}
                    </div>
                  ))}
                </div>
                
                {/* 早餐行 */}
                <div className="grid grid-cols-7 border-b border-slate-200 dark:border-slate-700">
                  {daysOfWeek.map(day => (
                    <div key={`${day}-breakfast`} className="py-4 px-3">
                      <div className="flex items-center mb-2 text-green-600 dark:text-green-400">
                        <Utensils size={16} className="mr-2" />
                        <span className="text-sm font-medium">早餐</span>
                      </div>
                      <ul className="text-sm space-y-1 text-slate-600 dark:text-slate-300">
                        {weeklyDietPlan[day].breakfast.map((item, index) => (
                          <li key={index} className="flex items-start">
                            <span className="mr-2 text-green-500">•</span>
                            <span>{item}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  ))}
                </div>
                
                {/* 午餐行 */}
                <div className="grid grid-cols-7 border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50">
                  {daysOfWeek.map(day => (
                    <div key={`${day}-lunch`} className="py-4 px-3">
                      <div className="flex items-center mb-2 text-orange-600 dark:text-orange-400">
                        <Utensils size={16} className="mr-2" />
                        <span className="text-sm font-medium">午餐</span>
                      </div>
                      <ul className="text-sm space-y-1 text-slate-600 dark:text-slate-300">
                        {weeklyDietPlan[day].lunch.map((item, index) => (
                          <li key={index} className="flex items-start">
                            <span className="mr-2 text-orange-500">•</span>
                            <span>{item}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  ))}
                </div>
                
                {/* 加餐行 */}
                <div className="grid grid-cols-7 border-b border-slate-200 dark:border-slate-700">
                  {daysOfWeek.map(day => (
                    <div key={`${day}-snack`} className="py-4 px-3">
                      <div className="flex items-center mb-2 text-purple-600 dark:text-purple-400">
                        <Utensils size={16} className="mr-2" />
                        <span className="text-sm font-medium">加餐</span>
                      </div>
                      <ul className="text-sm space-y-1 text-slate-600 dark:text-slate-300">
                        {weeklyDietPlan[day].snack.map((item, index) => (
                          <li key={index} className="flex items-start">
                            <span className="mr-2 text-purple-500">•</span>
                            <span>{item}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  ))}
                </div>
                
                {/* 晚餐行 */}
                <div className="grid grid-cols-7 bg-slate-50 dark:bg-slate-800/50">
                  {daysOfWeek.map(day => (
                    <div key={`${day}-dinner`} className="py-4 px-3">
                      <div className="flex items-center mb-2 text-blue-600 dark:text-blue-400">
                        <Utensils size={16} className="mr-2" />
                        <span className="text-sm font-medium">晚餐</span>
                      </div>
                      <ul className="text-sm space-y-1 text-slate-600 dark:text-slate-300">
                        {weeklyDietPlan[day].dinner.map((item, index) => (
                          <li key={index} className="flex items-start">
                            <span className="mr-2 text-blue-500">•</span>
                            <span>{item}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  ))}
                </div>
              </div>
              
              {/* 移动端折叠视图 */}
              <div className="lg:hidden space-y-4">
                {daysOfWeek.map(day => (
                  <div 
                    key={day}
                    className="bg-white dark:bg-slate-800 rounded-2xl shadow-lg overflow-hidden"
                  >
                    {/* 日期标题 */}
                    <div 
                      className="flex items-center justify-between p-4 cursor-pointer"
                      onClick={() => toggleDayExpansion(day)}
                    >
                      <div className="flex items-center">
                        <Calendar size={20} className="mr-3 text-green-600 dark:text-green-400" />
                        <h3 className="font-semibold">{day}</h3>
                      </div>
                      {expandedDays[day] ? (
                        <ChevronUp size={20} className="text-slate-500" />
                      ) : (
                        <ChevronDown size={20} className="text-slate-500" />
                      )}
                    </div>
                    
                    {/* 餐食内容 */}
                    {expandedDays[day] && (
                      <div className="divide-y divide-slate-200 dark:divide-slate-700">
                        {/* 早餐 */}
                        <div className="p-4">
                          <div className="flex items-center mb-3 text-green-600 dark:text-green-400">
                            <Utensils size={18} className="mr-2" />
                            <h4 className="font-medium">早餐</h4>
                          </div>
                          <ul className="space-y-2 text-slate-600 dark:text-slate-300 ml-6">
                            {weeklyDietPlan[day].breakfast.map((item, index) => (
                              <li key={index} className="flex items-start">
                                <span className="mr-2 text-green-500">•</span>
                                <span>{item}</span>
                              </li>
                            ))}
                          </ul>
                        </div>
                        
                        {/* 午餐 */}
                        <div className="p-4">
                          <div className="flex items-center mb-3 text-orange-600 dark:text-orange-400">
                            <Utensils size={18} className="mr-2" />
                            <h4 className="font-medium">午餐</h4>
                          </div>
                          <ul className="space-y-2 text-slate-600 dark:text-slate-300 ml-6">
                            {weeklyDietPlan[day].lunch.map((item, index) => (
                              <li key={index} className="flex items-start">
                                <span className="mr-2 text-orange-500">•</span>
                                <span>{item}</span>
                              </li>
                            ))}
                          </ul>
                        </div>
                        
                        {/* 加餐 */}
                        <div className="p-4">
                          <div className="flex items-center mb-3 text-purple-600 dark:text-purple-400">
                            <Utensils size={18} className="mr-2" />
                            <h4 className="font-medium">加餐</h4>
                          </div>
                          <ul className="space-y-2 text-slate-600 dark:text-slate-300 ml-6">
                            {weeklyDietPlan[day].snack.map((item, index) => (
                              <li key={index} className="flex items-start">
                                <span className="mr-2 text-purple-500">•</span>
                                <span>{item}</span>
                              </li>
                            ))}
                          </ul>
                        </div>
                        
                        {/* 晚餐 */}
                        <div className="p-4">
                          <div className="flex items-center mb-3 text-blue-600 dark:text-blue-400">
                            <Utensils size={18} className="mr-2" />
                            <h4 className="font-medium">晚餐</h4>
                          </div>
                          <ul className="space-y-2 text-slate-600 dark:text-slate-300 ml-6">
                            {weeklyDietPlan[day].dinner.map((item, index) => (
                              <li key={index} className="flex items-start">
                                <span className="mr-2 text-blue-500">•</span>
                                <span>{item}</span>
                              </li>
                            ))}
                          </ul>
                        </div>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>
        
        {/* 饮食建议 */}
        <section className="py-12 bg-slate-50 dark:bg-slate-800/50">
          <div className="container mx-auto px-4">
            <div className="max-w-3xl mx-auto">
              <h2 className="text-2xl font-bold mb-6 text-center">饮食计划建议</h2>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-md">
                  <div className="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900/50 flex items-center justify-center mb-4">
                    <Utensils size={24} className="text-green-600 dark:text-green-400" />
                  </div>
                  <h3 className="text-lg font-semibold mb-2">食物准备建议</h3>
                  <ul className="text-sm text-slate-600 dark:text-slate-300 space-y-2">
                    <li className="flex items-start">
                      <i className="fa-solid fa-check-circle mt-1 mr-2 text-green-500"></i>
                      <span>可以在周末准备好一周的食材，节省时间</span>
                    </li>
                    <li className="flex items-start">
                      <i className="fa-solid fa-check-circle mt-1 mr-2 text-green-500"></i>
                      <span>肉类可以提前烹饪并分装储存</span>
                    </li>
                    <li className="flex items-start">
                      <i className="fa-solid fa-check-circle mt-1 mr-2 text-green-500"></i>
                      <span>蔬菜建议新鲜烹饪，保持营养成分</span>
                    </li>
                  </ul>
                </div>
                
                <div className="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-md">
                  <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center mb-4">
                    <Clock size={24} className="text-blue-600 dark:text-blue-400" />
                  </div>
                  <h3 className="text-lg font-semibold mb-2">进食时间建议</h3>
                  <ul className="text-sm text-slate-600 dark:text-slate-300 space-y-2">
                    <li className="flex items-start">
                      <i className="fa-solid fa-check-circle mt-1 mr-2 text-blue-500"></i>
                      <span>早餐: 7:00-8:00</span>
                    </li>
                    <li className="flex items-start">
                      <i className="fa-solid fa-check-circle mt-1 mr-2 text-blue-500"></i>
                      <span>午餐: 12:00-13:00</span>
                    </li>
                    <li className="flex items-start">
                      <i className="fa-solid fa-check-circle mt-1 mr-2 text-blue-500"></i>
                      <span>加餐: 15:30-16:00</span>
                    </li>
                    <li className="flex items-start">
                      <i className="fa-solid fa-check-circle mt-1 mr-2 text-blue-500"></i>
                      <span>晚餐: 18:30-19:30</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
      
      {/* 页脚 */}
      <footer className="bg-slate-900 text-white py-6">
        <div className="container mx-auto px-4 text-center">
          <p className="text-slate-400 text-sm">
            © {new Date().getFullYear()} FitMaster 饮食计划 | 专业健身知识教学平台
          </p>
        </div>
      </footer>
    </div>
  );
}